<template>
  <div class="mnt-dialog form-container">
    <el-form ref="form" :model="formModel" label-width="120px" :rules="rules">
      <el-row style="text-align: center">
        <el-col :span="12">
          <el-form-item label="分类名称:" prop="clcd">
            <el-select v-model="formModel.clcd" clearable filterable>
              <el-option v-for="item in clcdOptions" :key="item.clcd" :label="item.clcd+' ['+item.describe+']'" :value="item.clcd"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代码类型:" prop="clcdType">
            <hey-select v-model="formModel.clcdType" disabled clcd="clcd_type_cd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据代码:" prop="dataKey">
            <el-input :disabled="disabledKey" v-model="formModel.dataKey"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据码值:" prop="dataValue">
            <el-input v-model="formModel.dataValue"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示顺序:" prop="sortNum">
            <el-input-number v-model="formModel.sortNum" align="left" controls-position="right" :max="999" :min="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否子级:" prop="isChild">
            <hey-select v-model="formModel.isChild" @change="chooseIsChild" clcd="ind_cd" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="showParent">
          <el-form-item label="父级分类名称:" prop="parentClcd">
            <el-select v-model="formModel.parentClcd" clearable filterable @change="chooseClcd">
              <el-option v-for="item in clcdOptions" :key="item.clcd" :label="item.clcd+' ['+item.describe+']'" :value="item.clcd"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="showParent">
          <el-form-item label="父级数据码值:" prop="parentDataKey">
            <el-select v-model="formModel.parentDataKey" clearable filterable>
              <el-option v-for="item in parentOptions" :key="item.dataKey" :label="item.dataValue" :value="item.dataKey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="submit-area">
      <el-col :span="24">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'DataMnt',
  props: ['pageType', 'editData'],
  data() {
    return {
      clcdOptions:[],
      parentOptions:[],
      disabledKey:false,
      showParent:false,
      formModel: {
        rcrdId: '',
        clcd: '',
        describe: '',
        dataKey: '',
        dataValue: '',
        sortNum: '',
        clcdType: '02',
        isChild: '0',
        parentClcd: '',
        parentDataKey: '',
      },
      rules: {
      }
    }
  },
  computed: {},
  mounted() {
    this.getClcd()
    this.init()
  },
  methods: {
    //获取所有分类代码
    getClcd(){
      this.post('/dictionary/getAllClcd', {}).then(res => {
        this.clcdOptions = res
      })
    },
    chooseIsChild(value){
      if(value=='1'){
        this.showParent = true
      }else{
        this.showParent = false
        this.formModel.parentClcd = ''
        this.formModel.parentDataKey = ''
        this.parentOptions = []
      }
    },
    chooseClcd(val){
      if(val){
        this.formModel.parentDataKey = ''
        //通过父级分类代码获取父级代码
        const param = {pageNum:1,pageSize:9999}
        param.isDelete = '0'
        param.clcd = val
        this.get('/dictionary/queryDataDictionary', param).then(res => {
          this.parentOptions = res.list
        })
      }else{
        this.formModel.parentDataKey = ''
        this.parentOptions = []
      }
    },
    init() {
      this.$form = this.$refs.form
      const { pageType, editData, formModel } = this
      if (pageType === 'edit') {
        this.disabledKey = true
        this.chooseIsChild(editData.isChild)
        this.chooseClcd(editData.parentClcd)
        this.assignData(editData, formModel)
      }
      this.initRules()
    },
    initRules() {
      const REQUIRED_MSG = this.CONST.REQUIRED_MSG
      this.rules = {
        describe: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        dataKey: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        dataValue: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        sortNum: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        isChild: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        parentClcd: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        parentDataKey: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
      }
      this.$nextTick(_ => {
        this.$form.clearValidate()
      })
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { pageType, formModel } = this
          const param = { ...formModel }
          const operateType = pageType === 'edit' ? '02' : '01'
          param.operateType = operateType
          const url = '/dictionary/maintainDataDictionary'
          const tip = pageType === 'edit' ? '修改成功！' : '新增成功！'
          this.post(url, param).then(res => {
            this.$info(tip, () => {
              this.$emit('mntSuc', res)
              this.closeDialog()
            })
          })
        }
      })
    },
    closeDialog() {
      this.$parent.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
